<template>
    <view class="tabs-container">
        <scroll-view class="sticky-top">
            <view class="order">
                <view class="box" @click="switchTab(id)" v-for="(item, id) in tabs" :key="id"
                    :class="[active == id ? 'active' : '']">{{ item.label }}</view>
            </view>
        </scroll-view>

        <view class="blocks">
            <block v-for="(item, index) in orderList" :key="index">
                <view class="block">
                    <view class="header">
                        <view class="orderNumber">{{ item.orderId || "--" }}</view>
                        <view class="orderTime">{{ item.createTime || "--" }}</view>
                    </view>
                    <view class="msg">
                        <view v-for="(shopping, index) in item.orderDetailList" :key="index">
                            <view class="name" v-if="item.orderDetailList.length > 0">
                                <text class="shopping-name">{{ shopping.goodsName + "*" + shopping.buyCount || "--" }}
                                </text>
                                <view class="singleMoney">{{ shopping.saleCountPrice }}元</view>
                            </view>
                            <view v-else>
                                <view class="name">
                                    <text class="shopping-name">未购买商品 </text>
                                    <view class="singleMoney">0元</view>
                                </view>
                            </view>
                        </view>
                        <view class="red-packet" v-if="item.priceDiscount > 0">
                            <image src="../../../static/icons/red_packet.png" class="image"></image>
                            <text>红包</text>
                            <view class="red-packet-money">-{{ item.priceDiscount }}元</view>
                        </view>
                        <view class="action">
                            <view class="price" v-if="active === 0 || active === 1">
                                订单总额<text>￥{{ item.orderMoney }}</text>
                            </view>
                            <view class="price" v-if="active === 2">订单总额<text>￥{{ item.priceOrder }}</text>
                            </view>
                            <!-- 99（无售后记录）表示是否有申请过售后处理 -->
                            <view v-if="item.refundStatus != '99'">
                                {{ item.refundStatus == 100 ? "售后中" : "" }}
                                {{ item.refundStatus == 110 ? "售后退款中" : "" }}
                                {{ item.refundStatus == 120 ? "售后审核不通过" : "" }}
                                {{ item.refundStatus == 130 ? "系统退款失败" : "" }}
                                {{ item.refundStatus == 140 ? "已退款或部分退款" : "" }}
                            </view>
                            <view v-else>
                                {{ item.orderStatus == 0 ? "订单未支付" : "" }}
                                {{ item.orderStatus == 10 ? "订单进行中" : "" }}
                                {{ item.orderStatus == 20 ? "订单识别中" : "" }}
                                {{ item.orderStatus == 30 ? "订单识别异常" : "" }}
                                {{ item.orderStatus == 40 ? "订单支付中" : "" }}
                                {{ item.orderStatus == 50 ? "扣款轮询中" : "" }}
                                {{ item.orderStatus == 60 ? "订单支付失败" : "" }}
                                {{ item.orderStatus == 70 ? "订单已支付" : "" }}
                                {{ item.orderStatus == 71 ? "未购买" : "" }}
                                {{ item.orderStatus == 80 ? "订单已取消" : "" }}
                                {{ item.orderStatus == 90 ? "开门失败，订单取消" : "" }}
                            </view>
                            <view class="operate" v-if="
                  item.orderStatus == 70 &&
                  item.refundStatus == 99 &&
                  item.payWay == 0
                ">
                                <image src="../../../static/icons/money.png" class="image"></image>
                                <text @click="refund(item.orderId)" style="color: #d92727">申请退款</text>
                            </view>
                            <view class="operate" v-if="
                  active === 1 ||
                  item.orderStatus == 40 ||
                  item.orderStatus == 50 ||
                  item.orderStatus == 60
                ">
                                <image src="../../../static/icons/money.png" class="image"></image>
                                <text @click="pay(item.orderId, item.orderMoney)" style="color: #d92727">待支付</text>
                            </view>

                            <!-- 暂时注释申请售后 -->
                            <!-- <button v-if="item.status == 1" class="button" @click="refund">申请退款</button> -->
                        </view>
                    </view>
                </view>
            </block>

            <view class="empty" v-if="orderList.length == 0">
                <image src="/static/icons/empty.png" mode=""></image>
                空空如也
            </view>
            <view v-else>
                <view class="noMore" v-if="noMore">没有更多啦</view>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                tabs: [{
                        id: 0,
                        label: "全部订单",
                    },
                    {
                        id: 1,
                        label: "待支付单",
                    },
                    {
                        id: 2,
                        label: "售后订单",
                    },
                ],
                active: 0,
                orderList: [], // 订单列表
                page: 1, // 页码
                pageSize: 10, // 页面大小
                noMore: false, // 没有更多了
            };
        },
        onLoad() {
            const onLogin = () => {
                // this.active = 0;
                this.getAllOrderList(); // 获取订单
            }
            this.$util.checkLogin(this, onLogin);
        },
        methods: {
            // 申请退款
            refund: function(orderId) {
                uni.navigateTo({
                    url: "/pages/mine/order/refundV2/refundV2?orderId=" + orderId,
                });
            },
            onReachBottom() {
                if (this.noMore) return false;
                this.page++;
                this.getAllOrderList();
            },

            // tab切换
            switchTab(id) {
                this.orderList = [];
                this.active = id;
                console.log(38, this.active);
                this.getAllOrderList(); // 获取订单
            },
            getAllOrderList() {
                let data;
                let url;
                if (this.active === 0 || this.active === 2) {
                    // 全部和售后
                    data = {
                        // deviceId: "", //测试，后面删除
                        orderId: "", // 空值查全部，非零查准确订单
                        userId: this.$store.state.userInfo.userId,
                        pageNo: this.page, // 页码
                        pageSize: this.pageSize, // 页面大小
                    };
                } else if (this.active === 1) {
                    // 待支付
                    data = {
                        userId: this.$store.state.userInfo.userId,
                        pageNo: this.page, // 页码
                        pageSize: this.pageSize, // 页面大小
                        // orderStatusIn: encodeURI("71,80"),
                        orderStatusIn: "40,50,60",
                    };
                }

                if (this.active === 2) {
                    // 售后订单
                    url = this.$api.OrderRefundList;
                } else if (this.active === 0 || this.active === 1) {
                    // 全部订单、待支付订单
                    url = this.$api.GetOrderData;
                }
                this.$request(url, data, "GET").then((res) => {
                    if (res.code == 200) {
                        res.result = res.result || [];
                        res.result.records.forEach((item, index) => {
                            this.orderList.push(item);
                        });
                        if (res.result.records.length < res.result.size) {
                            this.noMore = true;
                        }
                    } else {}
                });
            },
            // 拉起支付界面
            pay(orderId, orderMoney) {
                console.log("206", orderId, orderMoney);
                uni.navigateTo({
                    url: "../../../pages/activity/initiative_pay/initiative_pay?orderId=" +
                        orderId +
                        "&orderMoney=" +
                        orderMoney,
                });
            },
        },
    };
</script>
<style>
    @import url("./order.css");

    .order {
        display: flex;
        justify-content: space-between;
        background: white;
    }

    .active {
        color: rgb（255, 192, 0）;
        background-color: #ffc000;
        border-radius: 5px 5px 5px 5px;
    }

    .box {
        font-size: 30rpx;
        padding: 10rpx 10rpx;
        margin: 10rpx;
    }

    .sticky-top {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1;
    }
</style>